<template>
    <div class="container">
        <div style="width: 950px; height: 660px; background: #fff; display: flex; border-radius: 12px">
            <chatMenu :command.sync="command"></chatMenu>
            <chatContact v-if="command === 'chat'"></chatContact>
            <chatContent @emit="emit" v-if="command === 'chat'"></chatContent>
            <chatOrg v-if="command === 'contact'"></chatOrg>
            <calendar v-if="command === 'calendar'" style="width:890px"></calendar>
        </div>
    </div>
</template>

<script>
import io from 'socket.io-client'
let socket
import chatMenu from '@/views/menu'
import chatContact from '@/views/contact'
import chatContent from '@/views/content'
import chatOrg from '@/views/org'
import calendar from '@/views/calendar'
export default {
    components: {
        chatMenu,
        chatContact,
        chatContent,
        chatOrg,
        calendar
    },
    data() {
        return {
            command: 'chat'
        }
    },
    computed: {
        mac() {
            return localStorage.getItem('mac')
        }
    },
    created() {
        socket = io.connect(window.platform.socketioUrl + '?userId=' + localStorage.getItem('userId'))
        socket.on('connect', () => {
            console.log('connected to server')
        })
        socket.on('disconnected', () => {
            console.log('disconnected with server')
        })
        socket.on('reconnect_error', error => {
            console.log('reconnect_error with server')
        })
        socket.on('chat', data => {
            let result = JSON.parse(data)
            if (result.mac != this.mac) {
                this.$bus.$emit('receive', result)
            }
        })
        socket.on('room', data => {
            let result = JSON.parse(data)
            let type = result.type
            if (type === 'add') {
                this.$bus.$emit('addMember', result)
            } else if (type === 'remove') {
                this.$bus.$emit('removeMember', result)
            } else if (type === 'modify') {
                this.$bus.$emit('modifyName', result)
            } else if (type === 'quit') {
                this.$bus.$emit('quit', result)
            }
        })
        socket.on('revoke', data => {
            let result = JSON.parse(data)
            this.$bus.$emit('revoke', result)
        })
    },
    beforeDestroy() {
        socket.disconnect()
    },
    methods: {
        emit(data) {
            socket.emit('chat', data)
            this.$bus.$emit('message', data)
        }
    }
}
</script>
<style scoped>
.container {
    background: #babbbf;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
